<script setup name="skus">
import { getSkusList, createSkus, updateSkus, deleteSkus, updateSkusStatus } from "@/api/skus"
import { useInitTable, useInitForm } from "@/composables/useCommon"
import FormDialog from "@/components/FormDialog.vue"
import ListHeader from "@/components/ListHeader.vue"
import TagInput from "@/components/TagInput.vue"

// 引入公共方法
const { windowHeight, tableData, loading, currentPage, total, limit, multiSelectionIds, getData, handleDelete, handleStatusChange, tableRef, handleSelectionChange, handleMultiDelete } = useInitTable({
  getList: getSkusList,
  delete: deleteSkus,
  updateStatus: updateSkusStatus
})

// 解构表单公共方法
const { form, dialogRef, formRef, rules, dialogTitle, handleSubmit, handleCreate, handleEdit, resetForm } = useInitForm({
  getData,
  updata: updateSkus,
  create: createSkus,
  form: {
    name: "",
    default: "",
    order: 50,
    status: 1
  },
  rules: {
    name: [{ required: true, message: "规格名称不能为空", trigger: "blur" }],
    default: [{ required: true, message: "规格值描述不能为空", trigger: "blur" }],
    status: [{ required: true, trigger: "blur" }],
    order: [{ required: true, trigger: "blur" }]
  }
})

// 减去头部高度、标签高度、内边距高度
let h = windowHeight.value - 64 - 44 - 36
const h2 = windowHeight.value - 64 - 44 - 110
</script>

<template>
  <el-card shadow="never" :body-style="{ 'padding-bottom': '10px', 'padding-left': '0', 'padding-right': '0' }" :style="{ height: `${h}px` }">
    <ListHeader create="新增规格" @create="handleCreate" @refresh="getData" @delete="handleMultiDelete" layout="create,deleteData,refresh" CrPlacement="top" :multiSelection="multiSelectionIds" />
    <div class="card-table" :style="{ height: `${h2}px` }">
      <el-table ref="tableRef" :data="tableData" stripe style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" min-width="40" />
        <el-table-column prop="name" label="规格名称" min-width="80" />
        <el-table-column prop="default" label="规格值" min-width="66" />
        <el-table-column prop="order" label="排序" min-width="54" />
        <el-table-column label="状态" min-width="54">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              size="small"
              :active-value="1"
              :inactive-value="0"
              :loading="row.statusLoading"
              style="--el-switch-on-color: #13ce66"
              @change="handleStatusChange($event, row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="64" align="center">
          <template #default="{ row }">
            <el-tooltip effect="light" content="修改" placement="left">
              <el-icon @click="handleEdit(row)" class="edit">
                <View />
              </el-icon>
            </el-tooltip>
            <el-popconfirm width="200" title="是否要删除该商品规格？" confirmButtonText="确认" cancelButtonText="取消" @confirm="handleDelete(row.id)">
              <template #reference>
                <el-icon>
                  <CloseBold />
                </el-icon>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无数据" :image-size="200" />
        </template>
      </el-table>
      <!-- 分页 -->
      <div class="skus-pagination">
        <el-pagination background small layout="prev, pager, next" :total="total" :current-page="currentPage" :page-size="limit" :hide-on-single-page="total < 11" @current-change="getData" />
      </div>
    </div>
    <!-- 修改商品规格 -->
    <FormDialog ref="dialogRef" :width="60" :title="dialogTitle" @submit="handleSubmit" @close="resetForm" destroyOnClose>
      <el-form :model="form" ref="formRef" :rules="rules" :inline="false">
        <el-form-item label="规格名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入规格名称" />
        </el-form-item>
        <el-form-item label="规格排序" prop="order">
          <el-input-number v-model="form.order" :min="0" :max="1000" />
        </el-form-item>
        <el-form-item label="规格状态" prop="status">
          <el-switch v-model="form.status" size="small" :active-value="1" :inactive-value="0" style="--el-switch-on-color: #13ce66" />
        </el-form-item>
        <el-form-item label="规格值" prop="default">
          <TagInput v-model="form.default" />
        </el-form-item>
      </el-form>
    </FormDialog>
  </el-card>
</template>

<style lang="scss" scoped>
.el-card {
  border: 0;
  overflow-y: auto;
  .card-table {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .el-table {
      z-index: 0;
      .el-icon {
        cursor: pointer;
        margin: 0 8px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .skus-pagination {
      display: flex;
      justify-content: center;
      padding-top: 10px;
    }
  }
}

@media screen and (max-width: 375px), screen and (max-width: 414px) {
  :deep(.el-dialog--center) {
    min-width: 70% !important;
    max-width: 70% !important;
  }
  .el-card {
    .card-table {
      .el-table {
        .el-icon {
          margin: 0 4px;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
